<template>
  <div id="User">
    <el-tabs type="border-card">
      <el-tab-pane label="抢课状态"> 

    <el-header style="text-align: right; font-size: 12px">
      <el-button type="text" @click="logout">退出</el-button> </el-header>  

     <p>欢迎用户：{{usr}}</p>
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item >
              
              <h3 class="medium">是否已经选上课：{{ lesson }}（0：未选上 1：已选上）</h3>
            </el-carousel-item>
            <el-carousel-item >
              <h3 class="medium">当前剩余名额：{{ lessons }}个</h3>
            </el-carousel-item>
          </el-carousel>
      </el-tab-pane>

    </el-tabs>
    <br><br>
    <el-button type="primary" plain @click="getLesson">抢课</el-button>
    <el-button type="primary" plain @click="return_lesson">退课</el-button>
<!--    <br><br>-->
<!--    <router-link to="/">返回首页</router-link>-->
  </div>
</template>

<script>
  export default {
    name: "User",
    data () {
      return {
        lesson: "",
        logined: "登陆成功",
        get_lesson: "",
        lessont: "",
        usr:sessionStorage.getItem("userid"),
      }
    },
    created () {
      let data = new FormData()
      data.append('userid', sessionStorage.getItem("userid"))
      data.append('token', sessionStorage.getItem("token"))
      this.$axios.post("/api/check_lesson/", data).then(response => {
        this.lesson = response.data["lesson"]
        this.lessons = response.data["lessons"]
        if(response.data["error"] !== undefined){
          alert("请退出后重新登陆")
        }
      })
    },
    methods: {
      logout() {
        sessionStorage.setItem("login", "false")
        sessionStorage.removeItem("userid")
        sessionStorage.removeItem("token")
        this.$router.push("/login")
        alert("退出登录")
      },
      getLesson() {
        let data = new FormData()
        data.append('userid', sessionStorage.getItem("userid"))
        data.append('token', sessionStorage.getItem("token"))
        this.$axios.post("/api/get_lesson/", data).then(response => {
          // this.get_lesson = response.data["get_lesson"]
          alert(response.data["get_lesson"])
          this.lesson = response.data["lesson"]
          if(response.data["lessons"] !== undefined){
            this.lessons = response.data["lessons"]
          }
        })
      },
      return_lesson(){
        let data = new FormData()
        data.append('userid', sessionStorage.getItem("userid"))
        data.append('token', sessionStorage.getItem("token"))
        this.$axios.post("/api/return_lesson/", data).then(response => {
          if(response.data["lesson"] !== undefined){
            this.lesson = response.data["lesson"]
          }
          if(response.data["lessons"] !== undefined){
            this.lessons = response.data["lessons"]
          }
          alert(response.data["return_lesson"])
        })
      },
    }
  }
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

    .el-header, .el-footer {
    background-color: #cbd1da;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
</style>
